<template>
   <div >
    <div class='app-container'>
      <el-form ref="form" label-width="120px" inline :model="form" class='type'>
  <el-form-item label="商品类型搜索：" >
    <el-input v-model="form.skuName" palceholder='请输入'></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary"><i class="el-icon-search" @click='search'></i>查询</el-button>
  </el-form-item>
  </el-form>
    </div>
   <div class='app-container'>
   <el-card shadow="always">
      <el-button type="primary" class='config1' icon="el-icon-plus" @click='add'> 新建</el-button>
      <el-button type="primary" class='config' @click='importFn'>导入数据</el-button>
   </el-card>   
      <el-table style="width: 100%" :data='list'>
      <el-table-column
        label="序号"
        type='index'
        width='100'
        >
      </el-table-column>
      <el-table-column
        prop="skuName"
        label="商品名称"
        >
      </el-table-column>
      <el-table-column
        prop="skuImage"
        label="商品图片"
        align="center"
        >
        <template #default="{row}">
    <img
      slot="reference"
      :src="row.skuImage"
      style="border-radius: 50%; width: 100px; height: 100px; padding: 10px"
    >
  </template>
      </el-table-column>
      <el-table-column
        prop="brandName"
        label="品牌"
        >
      </el-table-column>
      <el-table-column
        prop="unit"
        label="规格"
        >
      </el-table-column>
      <el-table-column
        prop="price"
        label="商品价格"
        >
      </el-table-column>
      <el-table-column
        prop="skuClass.className"
        label="商品类型"
        >
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        >
         <template #default="{row}">
    		{{ row.createTime | formatDate }}
         </template>
      </el-table-column>
       <el-table-column
        label="操作" >
        <template #default='{row}'>
        <el-button type="text" @click='edit(row)'>修改</el-button>
        </template>
      </el-table-column>
    </el-table>
      <div class="page">
        <div class="left">
          <span>共{{params.totalCount}}条记录</span>
          <span>第 {{params.pageIndex}}/{{params.totalPage}}页</span>
        </div>
        <div class="right">
          <el-button-group>
      <el-button type="primary" 
      @click='commodityList(-1)' :disabled='params.pageIndex<=1?true:false'>上一页</el-button>
      <el-button type="primary" @click='commodityList(1)'>下一页</el-button>
      </el-button-group>
        </div>
      </div>
    </div>
    <add ref='add' :row='row'></add>
    <importfile ref='importfile'></importfile>
    </div>
</template>

<script>
import moment from 'moment'
import importfile from './components/importfile.vue'
import Add from './components/add.vue'
import {commodity} from '@/api/commodity'
// import moment from 'moment'
export default {
    name: 'eqweq',
    components:{
      Add,
      importfile
    },
    data() {
        return {
            form:{
              className:''
            },
            list:[],
            row:{},
          params:{
          pageIndex: 0,
          pageSize: 10,
          totalCount:0,
          totalPage:0,
          isRepair: false
        },
        };
    },
    mounted() {
        this.commodityList()
        // this.formatDate()
    },

    methods: {
    //  获取列表数据 
   async commodityList(num=0){
    this.params.pageIndex=+this.params.pageIndex+num
      console.log(this.params.pageIndex);
      const res =await commodity(this.params)
      console.log(res,'res的结果是什么');
      this.params.pageIndex=res.pageIndex
      this.params.totalPage=res.totalPage
      // console.log(res.currentPageRecords);
      this.list=res.currentPageRecords
      this.params.totalCount = parseInt(res.totalCount)
      console.log(this.list,'真个页面结果是什么');
    },

    // 新建
    add(){
      this.$refs.add.visible=true
    },
    // 编辑
    edit(row){
      this.$refs.add.visible=true
      this.$refs.add.form={...row}
      console.log(row,'row有没有id');
      this.row={...row}
    },
    // 查询
    async search(){
      console.log(111);
      const res = await commodity({...this.form,...this.params})
      console.log(res,'有搜索结果吗');
      this.list = res.currentPageRecords
      this.form={}
    },
    // 导入数据
    importFn(){
      this.$refs.importfile.visible=true
    },

    },
    filters:{
      //时间格式化
      formatDate (val){
        return moment(val).format('YYYY-MM-DD HH:mm:ss')
    }
    }
    
};
</script>

<style lang="scss" scoped>
.top{
  margin-bottom: 15px;
}
.el-button{
  margin-bottom: 15px;
}
.type{
  // padding: 15px;
  color:#606266;
  font-size: 14px;
}

.el-form{
  // width: 1159px;
  height: 64px;
  padding-top: 14px;
  background-color: #fff;
  border:none
}
.el-icon-search{
  margin-right: 7px;
}
.config1{
  background-color: #ff893b;
  color:#fff;
  border:none;
  cursor: pointer;
}
.config{
  background-color: #fbf4f0;
  color:#655b56;
  border:none;
  cursor: pointer;
}
.del{
    color:#ff5a5a
}
::v-deep .el-table td, .el-table th.is-leaf{
 border-bottom:none
}
::v-deep .el-table-column{
  height: 42px;
}
.page{
  height: 100px;
  line-height: 100px;
  background-color: #fff;
  display: flex;
  color:#dbdfe5;
  font-size: 20px;
  padding-left: 20px;
  .left{
    span{
      margin-right: 5px;
    }
  }
  .right{
    margin-left: 750px;
   ::v-deep .el-button{
      margin-left: 10px;
      background-color: #d5ddf8;
      border: none;
      color:#606266
       }
    
  }
}
</style>